<!-- 订单管理 -->
<template>
  <div>
  <el-form ref="ruleFormRef" :model="tableForm" inline class="ruleForm">
    <el-form-item label="站点名称" prop="orderNo">
      <el-input
        v-model="tableForm.queryRo.stationName"
        style="width: 150px"
        clearable
        placeholder="请输入站点名称"
      />
    </el-form-item>
    <el-form-item label="站点地址" prop="stationAddress">
      <el-input
          v-model="tableForm.queryRo.stationAddress"
          style="width: 150px"
          clearable
          placeholder="请输入站点地址"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查 询</el-button>
      <el-button type="success" @click="addStation()">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column prop="stationName" label="站点名称" align="center" />
    <el-table-column prop="stationAddress" label="站点地址" align="center" />
    <el-table-column prop="longitude" label="经度" align="center" />
    <el-table-column prop="latitude" label="维度" align="center" />
    <el-table-column prop="stationNo" label="站点序号" align="center"/>
    <el-table-column label="设备运行数/总数量 (台)" align="center" >
      <template #default="scope">
        <span >{{ (scope.row.deviceRun || '') + ' / ' + (scope.row.deviceNum || '') }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button link @click="openDialog(scope.row)" type="primary">查看详情</el-button>
        <el-button link type="primary" size="small" @click="editStation(scope.row)">编辑</el-button>
        <el-button link type="danger" size="small" @click="delStation(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <footer class="pagination">
    <el-pagination
      v-model:currentPage="tableForm.current"
      v-model:page-size="tableForm.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      small
    />
  </footer>

  <el-drawer
      v-model="drawer"
      :title="ruleForm.data.id ? '编辑补电站': '新增补电站'"
      :direction="direction">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm.data"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
      <el-form-item label="站点名称" prop="stationName">
        <el-input v-model="ruleForm.data.stationName" placeholder="请填写站点名称" />
      </el-form-item>
      <el-form-item label="站点地址" prop="stationAddress">
        <el-input v-model="ruleForm.data.stationAddress" placeholder="请填站点地址" />
      </el-form-item>
      <el-form-item label="站点序号" prop="stationNo">
        <el-input v-model="ruleForm.data.stationNo" placeholder="请填站点序号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
<!--        <el-button @click="cancelForm">取消</el-button>-->
        <el-button type="primary"  @click="submitForm(ruleFormRef)">确定</el-button>
      </div>
    </template>
  </el-drawer>
  <powerSupplementDetailDialog
      v-model:show="showDialog"
      :detail="detail"
      @openDialog="openDialog"
  ></powerSupplementDetailDialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import api from '@/api/apis/powerSupplementApi'
  import {ElMessage, ElMessageBox, FormInstance, FormRules} from "element-plus";
  import {} from '@/api/authApi/authApi'
  import powerSupplementDetailDialog from './components/powerSupplementDetailDialog.vue'
  import {delUserById, getRoleList} from "@/api/authApi/authApi";
  const drawer = ref(false)
  // const direction = ref('rtl')
  // const formSize = ref('default')
  // const status = ref(true)
  // const sex = ref('男')
  const ruleFormRef = ref<FormInstance>()

  // //获取所有角色列表
  // const stationList = async () =>{
  //   let res = await getRoleList()
  //   roleList.value = res.data.data
  //   console.log(res)
  // }
  
  const ruleForm = reactive({
    data:{
      id:"",
      stationNo: "",
      deviceRun: "",
      deviceNum: "",
      stationName:"",
      stationAddress:"",
    }
  })
  
  // 必填规则
  const rules = reactive<FormRules>({
    stationName: [
      // { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { required: true, message: '请填写站点名称', trigger: 'blur' },
      // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    stationAddress: [
      { required: true, message: '请填站点地址', trigger: 'blur' },
    ],
    // password: [
    //     { required: true, message: '请填写员工登录密码', trigger: 'blur' },
    // ],
    stationNo: [
      { required: true, message: '请填站点序号', trigger: 'blur' },
    ],
    // phone: [
    //   { required: true, message: '请填写员工电话', trigger: 'blur' },
    //   { min: 11, max: 11, message: '请填写正确的电话号码', trigger: 'blur' },
    // ],
  })
  onMounted(() => {
    getTableList()
    // getRoleAllList()
  })
  
  //编辑
  const editStation = (row)=>{
    ruleForm.data= {...row}
    // status.value = ruleForm.data.status == 1 ? true : false
    // ruleForm.data.status = 1
    drawer.value = true
    console.log('ruleForm',ruleForm.data)
  }
  
  const tableForm = reactive({
    asc: true,
    queryRo:{
      stationName:"",
      stationAddress:"",
    },
    searchCount: true,
    current: 1,
    pageSize: 50,
  })
  
  const time=ref<any>([])
  
  //总数
  const total = ref(0)
  //表格数据
  const tableList = ref([])

  //角色列表
  const stationList = ref([])
  //加载
  const loading = ref(false)

  //搜索
  const search = () => {
    tableForm.current = 1
    getTableList()
  }

  //弹框开关
  const showDialog = ref(false)
  //详情id
  const detail = ref()
  //打开详情弹框
  const openDialog = (val: string) => {
    detail.value = val
    showDialog.value = true
  }
  //加载
  // const loading = ref(false)
  // onMounted(()=>{
  //   getTableList()
  // })

  //获取表格数据
  const getTableList = async () => {
    loading.value = true
      // let obj = { ...ruleForm }
      let res = await api.stationListPage(tableForm)
      tableList.value= res.data.data.rows
      total.value= Number(res.data.data.total)
      loading.value = false
  }
  // //改变每页条数
  const handleSizeChange = (val: number) => {
    tableForm.current = 1
    tableForm.pageSize = val
    getTableList()
  }
  //改变当前页数
  const handleCurrentChange = (val: number) => {
    tableForm.current = val
    getTableList()
  }

  const delStation = (row)=>{
    ElMessageBox.confirm(
        '您确定要删除该站点吗?',
        '注意',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          let res = await api.delStationById(row.id)
          console.log(res)
          if(res.data.code == 200){
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            getTableList()
          }

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })

  }
  //新增
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        let res, message
        // ruleForm.data.sex = sex.value
        console.log('data',ruleForm.data)
        if(ruleForm.data.id){
          res = await api.updateStation(ruleForm.data)
          message = '编辑成功！'
        }else {
          res = await api.addStation(ruleForm.data)
          message = '新增成功！'
        }
        if(res.data.code == 200){
          ElMessage({
            message: message,
            type: 'success',
          })
          getTableList()
          drawer.value = false
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }


  // 新增
  const addStation = async (formEl: FormInstance | undefined) => {
    drawer.value = true
    let  obj = {
      stationName:'',
      stationAddress: '',
      stationNo: "",
      deviceRun: "",
      deviceNum: "",
    }
    ruleForm.data = obj
  }



  const statusCn = (value: string) => {
    let obj: any = {
      0: '提交订单',
      1: '司机接单',
      2: '充电中',
      3: '充电暂停',
      4: '未支付',
      5: '已支付',
      6: '预约订单',
      7: '司机已抢单',
      8: '司机已取消',
      9: '用户已取消',
    }
    return obj[value]
  }
  const orderStatusList=[
    {name:"提交订单",value:0},
    {name:"司机接单",value:1},
    {name:"充电中",value:2},
    {name:"充电暂停",value:3},
    {name:"未支付",value:4},
    {name:"已支付",value:5},
    {name:"预约订单",value:6},
    {name:"司机已抢单",value:7},
    {name:"司机已取消",value:8},
    {name:"用户已取消",value:9},
  ]
</script>

<style scoped lang="scss">
footer {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
